<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 501px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            /* transform: translatex(100px);
            transform: translatey(100px);
            transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1：translateZ沿着z轴移动; */
            /* 2：translateZ后面单位我们一般跟px */
            /* 3：translatez（100px）向外移动100px 向我们的眼睛来移动的 */
            /* 4：3d移动的简写方法 */
            /* transform:translate3d(x,y,z); */
            /* 英文逗号隔开 */
            /* transform: translate3d(100px,100px,100px); */
            /* 5：xyz是不能省略任何一个值得，如果没有则写0 */
            transform: translate3d(50px,0px,500px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>